<div class="container">
<div id="perceive" >
<div id="header-wrapper">
        <div id="logo">
            <a id="perceive-logo" href="#" title="Designmodo – Web Design Blog and Shop"></a>
        </div>
</div>
<div class="row demo-tiles">
        <div class="span3">
          <div class="tile">
            <img class="tile-image big-illustration" alt="" src="css/images/temperature.png">
            <h3 class="tile-title">温湿度感知</h3>
            <p>实时展现当前环境下的温度与湿度</p>
            <a class="btn btn-primary btn-large btn-block " href="#" >预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile">
            <img class="tile-image" alt="" src="css/images/door.png">
            <h3 class="tile-title">门磁状态感知</h3>
            <p>查看当前门磁的开启or闭合状态</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile">
            <img class="tile-image" alt="" src="css/images/water.png">
            <h3 class="tile-title">水位感知</h3>
            <p>实时检测当前环境下水位传感器状态</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/ar.png">
            <h3 class="tile-title">AR 人机交互</h3>
            <p>提供所见即所控，直观统一的AR使用界面</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
        </div>

<div class="row demo-tiles">
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/gesture.png">
            <h3 class="tile-title">手势感知</h3>
            <p>利用动作感应，手势感知技术实现人机互动</p>
            <a class="btn btn-primary btn-large btn-block gesture_popup" href="http://42.123.86.187:3000?pw=600&amp;ph=400">预览</a>
          </div>
        </div>
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/brain.png">
            <h3 class="tile-title">脑电波感知</h3>
            <p>通过生物电传感器感知人的身体及思维状态</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/motion.png">
            <h3 class="tile-title">运动感知</h3>
            <p>对当前环境下的运动物进行感知与监测</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/air.png">
            <h3 class="tile-title">空气感知</h3>
            <p>实时展现当前环境下空气质量，包括PM2.5等指标</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
 </div>
</div>


<div id="control" >
<div id="header-wrapper">
        <div id="logo">
            <a id="control-logo" href="#" title="Designmodo – Web Design Blog and Shop"></a>
        </div>
</div>


<div class="row demo-tiles">
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/energy.png">
            <h3 class="tile-title">智慧节能</h3>
            <p>实现温度控制，电源控制等全智能化调度</p>
            <a class="btn btn-primary btn-large btn-block energy_popup" href="http://42.123.86.187:3030/sampletv">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/sprinklerI.png">
            <h3 class="tile-title">智慧灌溉</h3>
            <p>根据时间计划，当前环境智能调度灌溉系统</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/hue.png">
            <h3 class="tile-title">Hue控制</h3>
            <p>实现对Hue的光照，颜色等远程控制</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/arm.png">
            <h3 class="tile-title">机械臂控制</h3>
            <p>实现对机械臂的移动方向，高度等远程控制</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
 </div>

<div id="stream" >
<div id="header-wrapper">
        <div id="logo">
            <a id="stream-logo" href="#" title="Designmodo – Web Design Blog and Shop"></a>
        </div>
</div>

<div class="row demo-tiles">
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/machine.png">
            <h3 class="tile-title">机械流采集</h3>
            <p>实现对机械流数据，状态信息等进行实时采集</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/camera.png">
            <h3 class="tile-title">视频流采集</h3>
            <p>通过摄像机实现视频流数据的实时采集</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>
  
        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/wifibeacon.png">
            <h3 class="tile-title">WiFi探针流采集</h3>
            <p>实现WiFi探针数据，上网行为流数据的实时采集</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>

        <div class="span3">
          <div class="tile tile-hot">
            <img class="tile-image big-illustration" alt="" src="css/images/ibeacon.png">
            <h3 class="tile-title">Beacon数据采集</h3>
            <p>通过ibeacon实现流实时采集与内容推送</p>
            <a class="btn btn-primary btn-large btn-block" href="#">预览</a>
          </div>
        </div>



      </div>
 </div>

</div>
<script>

$('.gesture_popup').popup();
$('.energy_popup').popup({
				types		: {
					energy			: function(content, callback){
						content = '<iframe width="1200" height="600" src="'+content+'" frameborder="0" allowfullscreen></iframe>';
						// Don't forget to call the callback!
						callback.call(this, content);
					}
				},
				width				: 1200,
				height				: 600
			});




</script>
